<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script lang="ts" setup>
import { ref, Ref, onMounted } from "vue";
import { useEcharts } from "../hooks/useEcharts";
import geo from "../json/geo";
import mapping from "../json/mapping";

/*
  组件功能：展示世界地图各个国家数据
  （与 WorldWideChart.vue 的区别在于这个是一级地图）
*/

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, echarts } = useEcharts(chartRef as Ref<HTMLDivElement>);
echarts.registerMap("WorldCountry", geo.WorldCountryGeo);

// 世界地图选项
const options: echarts.EChartsOption = {
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
  series: [
    {
      name: "世界地图",
      type: "map",
      map: "WorldCountry",
      label: {
        show: false,
        position: 'top'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "14",
        },
      },
      nameMap: mapping.CountryNameZhMapping,
    },
  ],
};

onMounted(() => {
  setOptions(options);
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
